<template>
  <view class="main-container">
    <view class="hotel-title">
      <!-- <wd-icon name="thin-arrow-left" size="18px" @click="pageBack"></wd-icon>
      <view class="hotel-name">酒店民宿</view>
      <view style="width: 50rpx;"></view> -->
    </view>
	<HeaderBar title="酒店民宿" :titleColor="titleColor" :navBarBgc="headerBgc" :isFixed="true"></HeaderBar>
    <view class="hotel-mian">
      <view class="hotel-homestay">
        <!-- <img class="other-img" src="http://img.jowong.com/aba/2025-03-28/pic2_1743145566955.png" alt=""> -->
		<wd-swiper
		    :list="swiperList"
		    autoplay value-key="imgUrl"
		    height="136"
		></wd-swiper>
        <view class="search-container">
          <!-- 目的地选择 -->
          <view class="location-select">
            <view style="width: 20%;">
              <wd-picker :columns="columns" v-model="queryData.district" use-default-slot> 
                <text class="destination" >{{getNameById(queryData.district)}}</text>
              </wd-picker>
            </view>
            <wd-icon name="caret-down-small" size="25px"></wd-icon>
            <input class="hotel-input" v-model="queryData.name" placeholder="酒店名称" />
            <text class="hotel-local">当前位置</text>
            <wd-icon name="location" size="25px"></wd-icon>
          </view>

          <!-- 日期选择 -->
          <view class="datepicker">
            <datepicker ref="childInitialValue"  :startDate="queryData.beginDate" :endDate="queryData.endDate" @change="getdate"></datepicker>
          </view>

          <!-- 房间选择 -->
          <view class="room-select" @click="handlePopup">
            <text class="roominput">{{queryData.room}}间房 {{queryData.adult}}成人 {{queryData.children}}儿童</text>
            <wd-icon name="caret-down-small" size="25px"></wd-icon>
          </view>

          <!-- 查询按钮 -->
          <button class="search-btn" @click="selectThotel">查 询</button>
        </view>

      </view>

      <!--  今日特惠 img  -->
      <view class="recommend-icon-container">
        <image class="recommend-icon" src="http://img.jowong.com/aba/2025-03-28/tehui_1743145918828.png" lazy-load></image>
		
      </view>
      <!-- <img class="hotel-img" src="http://img.jowong.com/aba/2025-03-28/pic2_1743145566955.png" alt=""> -->
	  <wd-swiper
	      :list="swiperListTwo"
	      autoplay value-key="imgUrl"
	      height="136"
	  ></wd-swiper>
      <!--  为你推荐 img  -->
      <view class="recommend-icon-container" v-if="hotelData">
        <image class="recommend-icon" src="http://img.jowong.com/aba/2025-03-28/tuijian_1743146001789.png" lazy-load></image>
        <view class="tuiqianquanbu">
          <!-- 全部<wd-icon name="chevron-down" size="22px"></wd-icon> -->
        </view>
      </view>
      <view class="hotel-data">
        <view class="hotel-info" v-for="item in hotelData" :key="item" @click="hoteldetail(item)">
          <img class="otherimg" :src="item.headImageUrl" alt="">
          <view class="hoteltitle">{{item.name}}</view>

          <view class="num-price">
            <view class="selnum"></view>
            <view class="hotel-price"><text style="font-size: 20rpx;">￥</text>{{item.minPrice}}<text style="font-size: 20rpx;">起</text></view>
          </view>
        </view>
      </view>
    </view>
    <roomAndPeople  :showPopup="showPopup" @close="closePopup"/>
  </view>
</template>
 
<script setup lang="ts">
import HeaderBar from "@/components/HeaderBar/index.vue";  
import {onLoad} from "@dcloudio/uni-app";
import {commonWordList} from "@/api/system";
import datepicker from "@/components/DatePicker/date-picker.vue";
import {ref,reactive,watch} from "vue";
import {gegetByPage,hotelRecommd} from "@/hotelHomestay/api/hotelHomestay";
import roomAndPeople from "@/components/roomAndPeople/index.vue";
import useHotelStore from '@/store/hotel';
import {styleSettingContent} from "@/api/system";

const {locationInfo} = useStore('app');
const headerBgc = ref("transparent");
const titleColor = ref("#2D2D2D"); 
const hotelStore = useHotelStore();
const columns = ref([])
const childInitialValue = ref<number | null>(null); // 存储子组件初始值
const childRef = ref<InstanceType<typeof datepicker> | null>(null); // 子组件实例引用

const swiperList = ref([]);
const swiperListTwo = ref([]);
const queryData = reactive({
  district:0,
  name:'',
  lnt:'' as number | string,
  lat:'' as number | string,
  beginDate: '',
  endDate: '',
  room:1,
  adult:1,
  children:1
})
const showPopup = ref(false);
const hotelData = ref([])
const pageBack = () =>{
  uni.navigateBack()
}
const searchScenicSpotTicketSetting = async () => { 
    try {
      const res = await styleSettingContent({codes:"HOTEL_BANNER"});
      const result = await styleSettingContent({codes:"HOTEL_BANNER_TWO"});
	  swiperList.value = res.result.HOTEL_BANNER
	  swiperListTwo.value = result.result.HOTEL_BANNER_TWO
    } catch (error) {
      console.log(error,'获取配置失败')
    } 
  }
onPageScroll((e) => { 
	if (e.scrollTop > 110) {
		headerBgc.value = "#A7C6AC";
		titleColor.value = "#2D2D2D";
	} else {
		headerBgc.value = "transparent";
		titleColor.value = "#2D2D2D";
	}
})
watch(() => hotelStore, (newVal) => {
	// console.log(newVal);
  queryData.beginDate = newVal.beginDate
  queryData.endDate = newVal.endDate
}, { deep: true });
// const getdistrict = ref('')
// function handleConfirm({ value }) {
//  console.log(value);
//  const data =
// }

const queryCommonWordList = async () => {
	await commonWordList({keys:"AREA"}).then(res => { 
		columns.value  = res.result.AREA.map(item => ({
		  label: item.name,
		  value: item.code
		})); 
	}); 
}; 
const getNameById = () => { 
  return columns.value.find(item => item.value == queryData.district)?.label;
  // return columns.value.find(item => item.code == val)?.name || '';
};
const getdate = (e) =>{
  hotelStore.setbeginDate(e.choiceDate[0].re);
  hotelStore.setendDate(e.choiceDate[1].re);
  hotelStore.setdayCount(e.dayCount)
  hotelStore.setfirstweek(e.choiceDate[0].week);
  hotelStore.setlastweek(e.choiceDate[1].week);
}

const selectThotel =()=>{
  gegetByPage(queryData).then(res=>{
	// console.log(queryData);
    uni.navigateTo({
      url:'/hotelHomestay/pages/hotelList/index?res=' + encodeURIComponent(JSON.stringify(res.result)),
    });
  })

}

const hoteldetail =(data)=>{ 
  uni.navigateTo({
    url:`/hotelHomestay/pages/hotelDteail/index?id=${data.id}`,
  });
}
const handlePopup = () => {
  showPopup.value = true;
};
const closePopup = (data) => {
  queryData.room = data.room
  queryData.adult = data.adult
  queryData.children = data.children
  showPopup.value = false;
};
onLoad(() => {
    searchScenicSpotTicketSetting();
	const {locationInfo} = useStore('app');
	if(!locationInfo.value.latitude || !locationInfo.value.longitude) {
	  let {latitude:_latitude,longitude:_longitude} = uni.getStorageSync('locationInfo');
	  queryData.lat = _latitude;
	  queryData.lnt = _longitude;
	}else {
	  let {latitude:_latitude,longitude:_longitude} = locationInfo.value;
	  queryData.lat = _latitude;
	  queryData.lnt = _longitude;
	}
	// console.log(hotelStore);
  queryCommonWordList()
  queryData.beginDate = hotelStore.beginDate
  queryData.endDate = hotelStore.endDate 
  
  hotelRecommd(queryData).then(res=>{
    hotelData.value = res.result
  })
});
</script>


<style lang="scss" scoped>
.main-container{
  min-height: 100vh;
  background: linear-gradient(to bottom, #A7C6AC 0%, #feffea 35%);

  .hotel-title{
    // border: 1px solid;
    // position: fixed;
    height: 62rpx;
    display: flex;
    padding:13.5% 0 30rpx 20rpx;
    align-items: center;
  }
  .hotel-name{
    width: 100%;
    height: 100%;
    font-family: PingFang SC;
    font-weight: 500;
    font-size: 33rpx;
    color: #2B2B24;
    text-align: center;
    line-height: 60rpx;
  }
  .hotel-mian{
    padding: 20rpx;
    .hotel-homestay{
      margin-bottom: 40rpx;
      background-color: #fff;
      border-radius: 20rpx;
      .other-img{
        height: 245rpx;
        width: 100%;
      }
      .search-container {
        // border: 1rpx solid #E4E5DE;
        margin: 40rpx;
        display: flex;
        flex-direction: column;
        align-items: center;
      }

      /* 目的地选择 */
      .location-select {
        border-bottom: 1upx solid #eee;
        display: flex;
        align-items: center;
        width: 100%;
        padding: 20rpx 0;
      }
      .destination {
        font-family: PingFang SC;
        font-weight: 800;
        font-size: 33rpx;
        color: #333333;
        line-height: 17rpx;
		width: 100%;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
      }
	  .choose{
        font-family: PingFang SC;
        // font-weight: 800;
        font-size: 33rpx;
        color: #a6a6a6;
        line-height: 17rpx;
		width: 100%;
		  
	  }
      .hotel-input {
        flex: 1;
        margin-left: 10rpx;
        font-size: 32rpx;
        border-right: 1rpx solid #aaa;
      }
      .hotel-local{
        width: 20%;
        padding: 10rpx;
      }
      .icon-location {
        width: 30rpx;
        height: 30rpx;
      }

      /* 日期选择 */
      .datepicker {
        width: 100%;
      }
      .date-box {
        padding: 10rpx;
      }
      .night-count {
        font-size: 24rpx;
        color: #888;
      }

      /* 房间选择 */
      .room-select {
        width: 100%;
        padding: 20rpx 0;
        border-bottom: 1upx solid #eee;
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-family: PingFang SC;
        font-weight: 800;
        font-size: 33rpx;
        color: #333333;
        .roominput{
          width: 80%;
        }
      }
      .icon-arrow {
        width: 25rpx;
        height: 25rpx;
        margin-left: auto;
      }

      /* 查询按钮 */
      .search-btn {
        width: 100%;
        background: #1aac82;
        color: white;
        font-size: 28rpx;
        font-weight: bold;
        // padding: 15rpx;
        margin: 40rpx;
        border-radius: 10rpx;
      }
    }
    .recommend-icon-container {
      display: flex;
      padding: 51.5rpx 0 31.5rpx 0;
      justify-content: space-between;
      .recommend-icon {
        width: 230rpx;
        height: 45rpx;
        background-size: cover;
      }
      .tuiqianquanbu{
        font-family: PingFang SC;
        font-weight: 500;
        font-size: 29rpx;
        color: #777777;
      }
    }
    .hotel-img{
      width: 100%;
      height: 245rpx;
    }
    .hotel-data{
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      .hotel-info{
        background-color: #EEF0DF;
        margin-bottom: 20rpx;
        border-radius: 10rpx;
        width: 48.5%;
        .otherimg{
          border-top-left-radius:10rpx ;
          border-top-right-radius:10rpx ;
          width: 100%;
          height: 278rpx;
        }
        .hoteltitle{
          // border: 1rpx solid;
          font-family: PingFang SC;
          font-weight: bold;
          font-size: 25rpx;
          color: #181818;
          line-height: 29rpx;
          padding: 10rpx;
        }
        .num-price{
          padding: 20rpx 10rpx;
          display: flex;
          justify-content: space-between;
          .selnum{
            font-family: PingFang SC;
            font-weight: 500;
            font-size: 22rpx;
            color: #777777;
            line-height: 17rpx;
          }
          .hotel-price {
            font-family: PingFang SC;
            font-weight: bold;
            font-size: 32rpx;
            color: #AA5414;
            line-height: 17rpx;
          }
        }
      }
    }
  }

}
</style>
